.row {
  box-sizing: border-box;
  background-color: white;
  white-space: nowrap;
  width: auto;
}

.row > div {
  display: inline-block;
  box-sizing: border-box;
  min-width: 100px;
  cursor:default;
  user-select: none;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.6s ease-out;
}

.row:hover *{
  background-color: khaki;
}

/* position, height, top, bottom will be overrided */
.container {
  transition: height 0.1s ease-in-out;
  box-sizing: border-box;
  width: 100%;
}

.cell {
  height: auto;
  padding: 5px;
}

.cell-text, .cell-string, .cell-select {
  composes: cell;
}

.cell-numeric {
  composes: cell;
  font-family: 'TheMixMono', 'TheSansMono', monospace;
  text-align: right;
  font-weight: 700;
  letter-spacing: -0.08rem;
}

.inline-form {

  position: sticky;
  left: 0;

  box-sizing: border-box;
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
  padding: 5px 0;
  width: 100%;

  z-index: 1;
}